<template>
  <div id="add_book_mask">
  <!--添加图书的二级弹出框-->
    <el-form ref="form" :model="newBookObj" label-width="80px">
      <el-form-item label="图书名称">
        <el-input v-model="newBookObj.name"></el-input>
      </el-form-item>
      <el-form-item label="图书作者">
        <el-input v-model="newBookObj.author"></el-input>
      </el-form-item>
      <el-form-item label="图书封面">
        <el-upload
            class="avatar-uploader"
            :action="`${baseurl}/image_upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="newBookObj.cover" :src="newBookObj.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="图书价格">
        <el-input v-model="newBookObj.price"></el-input>
      </el-form-item>
      <el-form-item label="出版社">
        <el-input v-model="newBookObj.press"></el-input>
      </el-form-item>
      <el-form-item label="图书信息">
        <el-input type="textarea" autosize  v-model="newBookObj.info"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加图书</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import baseurl from "../../../../const/baseurl";
import {addBook} from "../../../../network/book";

export default {
  name: "AddBookMask",
  data(){
    return{
      newBookObj:{},
      imageUrl: '',
      baseurl,
    }
  },
  methods:{
    //文件上传时
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      if (res.code===200){
        this.newBookObj.cover=res.data;
        this.imageUrl=res.data;
      }
    },
    //提交时
    onSubmit(){
      addBook(this.newBookObj).then((result)=>{
        console.log(result);
        if (result.data.code===200){
          this.$message({
            message: '添加图书成功!',
            type: 'success'
          });
          //跳转空白页,更新数据
          sessionStorage.setItem('sixthUrl','/admin/page/bookmanage');
          this.$router.push('/blankPage');
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    },
    //单击取消按钮时
    cancel(){
      this.$emit('onCancel',false);
    }
  }

}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
